<template>
  <div style="width: 500px">
    <a-form
      :model="formData"
      ref="formRef"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
    >
      <a-form-item
        label="Username"
        name="username"
        :rules="[{ required: true, message: '请输入用户名' }]"
      >
        <a-input v-model:value="formData.username" />
      </a-form-item>

      <a-form-item
        label="Password"
        name="password"
        :rules="[{ required: true, message: '请输入密码' }]"
      >
        <a-input-password v-model:value="formData.password" />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit" @click="Class.onSubmit"
          >登录</a-button
        >&nbsp;&nbsp;
        <a-button>重置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { message } from 'ant-design-vue';
import { loginData } from "../type/login";
import { login } from "@/api/api";
import { setToken } from '@/utils/auth';
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const data = reactive(new loginData());
    const router = useRouter();
    const formRef = ref();
    class Class{
      onSubmit(){
        formRef.value
        .validate()
        .then(() => {
          login(data.formData).then((res)=>{
            console.log(res.data.code)
            if(res.data.code==200){
              setToken(res.data.token)
              message.success('登录成功');
              router.push("/")
            }
          });
        })
        .catch(() => {
          console.log("error");
          return false
        });
      }
    }
    return {
      ...toRefs(data),
      Class:new Class(),
      formRef,
    };
  },
});
</script>

<style scoped></style>
